<!--获取验证码倒计时组件-->
<template>
  <div>
    <span>获取验证码({{countDown}}S)</span>
  </div>
</template>

<script setup lang="ts">
import {ref, watch} from "vue";

//倒计时
let countDown = ref<number>(5);
// 接收父组件(login)的flag(获取验证码)状态,作为计算器的显示与隐藏的契机
let props = defineProps(["flag"]);
watch([props.flag],()=> {
  //开启定时器
  let timer = setInterval(()=>{
    countDown.value--;
    if (countDown.value == 0) {
      // 通知父组件倒计时结束
      $emit("getFlag", false);
      //清除定时器
      clearInterval(timer);
    }
  },1000);

},{immediate:true});
// 接受父组件传递过来的props.flag,用于控制倒计时族简单显示与隐藏
let $emit = defineEmits(["getFlag"]);

</script>

<style scoped lang="scss">

</style>